@import "_navigation_mixins";

body.is-logged-out{
	.#{$namespace}loginUser{
		li{
			a{
				.login-Icon{
					display: none;
				}
			}
		}
	}
	.#{$namespace}topHeader{
		@media #{$phone}{
			min-height: var(--header-size);
		}
		a {
			&:focus, &:hover, &:active {
				text-decoration: underline;
				color: var(--sakai-text-color-1);
			}
		}
	}
}

.#{$namespace}mainHeader{
	border-bottom:1px solid var(--sakai-border-color);
	position: relative;

	.#{$namespace}headerLogo{
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 0;
		height: $banner-height;
		background: var(--top-header-background);
		text-align: center;
		@media #{$phone}{
			display: inline-block;
		}

		.#{$namespace}headerLogo--institution{
			width: $tool-menu-width;
			height: 100%; // align vertically center
			background: var(--logo) no-repeat center center;
			background-size: var(--logo-width) var(--logo-height);
			background-color: var(--logo-background-color);
			opacity: var(--logo-opacity);

			@media #{$phone}{
				float: left;
				width: calc(#{$standard-spacing} + #{var(--logo-width)});
				margin-right: $standard-space-2x;
			}
		}
	}

	.#{$namespace}loginUser{
		display: inline-flex;
		li{
			display: inline-block;
			margin: 0 0.8em 0 0;
			@media #{$phone}{
				margin: 0 0.2em 0 0;
			}
			.#{$namespace}loginUser__message{
				display: inline-block;
				margin: 0 1em 0 0;
			}
			a{
				.login-Icon{
					@extend .fa-power-off;
					@extend .fa;
					@extend .fa-lg;
					margin: 0 0.6em 0 0;
					@media #{$phone}{
						font-size: 1.7em;
						position: relative;
						left: 0.4em;
					}
				}
			}
		}
		p{
			margin: 0.05em 1.5em 0 0;
		}
	}

	&.is-maximized{
		.siteNavWrap{
			background: var(--sites-nav-background);
			@media #{$phone}{
				display: none;
			}
		}
	}

	&.is-fixed {
		.#{$namespace}topHeader {
			padding-top: $banner-height;
		}
		.#{$namespace}headerLogo {
			position: fixed;
			top: 0;
			width: 100%;
			box-shadow: var(--divider-shadow);
			z-index: 1000;
			overflow: visible;
		}
	}

	@media #{$phone}{
		background: var(--sakai-primary-color-1);
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 97;
	}
}

.userNav_link{
	color: var(--sakai-text-color-1);
	font-family: $header-font-family;
	font-size: 0.9em;
	font-weight: $header-font-weight;
	padding: 0 0.5em 0 0;
	text-decoration: none;
}

.is-logged-out{
	.userNav__subnav{
		position: inherit;
	}
}

.userNav__subnav{
	font-family: $header-font-family;
	position: absolute;
	right: 0em;
	width: 20em;
	z-index: 99;
	box-shadow: var(--elevation-8dp);
	list-style: none;
	padding: 0 0 0 0;
	li{
		display: flex;
		border: 0px none;
		@include border-radius( 0 );
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		min-height: 15px;
		a{
			display: block;
			padding: 0.65em;
			text-decoration: none;
			color: var(--link-color);
			line-height: 1em;
			&:focus, &:hover{
				text-decoration: underline;
				color: var(--link-hover-color);
			}
			&:active
			{
				text-decoration: underline;
    			color: var(--link-active-color);
			}
			.toolMenuIcon{
				@extend .fa-fw;			// standardize the width of all icons for proper text alignment
				vertical-align: sub;
				margin: 0 0.5em 0 0;
			}
		}
	}
	&.is-visible{
		display: block;
		margin: 0.4em 0 0 -0.55em;
	}
	&.is-hidden{
		display: none;
	}
	.#{$namespace}userNav__submenuitem--fullname-and-id{
		padding-top: 1em;
		color: var(--sakai-text-color-1);
		display: inline-block;
		margin-bottom: 5px;
		width: 10em;
		word-wrap: break-word;
		vertical-align: top;

		.#{$namespace}userNav__submenuitem--fullname{
			font-weight: $header-font-weight;
			font-size: 120%;
			line-height: 1.2;
			padding: 2px 0;
		}

		.#{$namespace}userNav__submenuitem--displayid{
			margin-top: $standard-space;
			font-weight: normal;
			line-height: 1.2;
		}

	}
	.#{$namespace}userData{
		border-bottom: 1px solid var(--tool-border-color);
		margin-bottom: 0.5em;
		background-color: var(--tool-menu-background-color);
	}

	.#{$namespace}userNav__submenuitem--profile-and-image{
		display: inline-block;
		vertical-align: top;
		padding: $standard-spacing $standard-spacing 0 $standard-spacing;

		.#{$namespace}userNav__submenuitem--profilepicture,
		.#{$namespace}userNav__submenuitem--profilepicture-static{
			width: 64px;
			height: 64px;
			margin: 0; /* to override, within the dropdown panel */
		}

		.#{$namespace}userNav__submenuitem--profile{
			display: block;
		}
	}
}

.#{$namespace}topHeader{
	background: var(--top-header-background);
	color: var(--sakai-text-color-inverted);
	font-size: 1em;
	height: auto;
	width: 100%;
	box-shadow: var(--divider-shadow);

	a
	{
		@include display-flex;
		@include align-items( center );

		color: var(--topNav-text-color);
		@media #{$phone} {
			line-height: 1;
		}
	}
	> * {
		transition: all 0.3s ease;
		@media #{$phone}{
			display: inline;
		}
	}
	.#{$namespace}loginNav{
		height: $banner-height;
		@include flex-shrink( 0 );
		@include display-flex;
		@include align-items( center );
		@include justify-content( flex-end );
		margin-right: $standard-spacing;
		@media #{$phone}{
			margin-right: $standard-space-2x;
		}

	}

	@media #{$phone}{
		@include display-flex;
		position: fixed;
		width: 100%;
		top: 0;
		font-size: 12px;
		min-height: var(--header-size);
		box-shadow: none;

		&.moving{
			top: -4.2em;
		}
	}
}

/* because #loginLinks appears on the Gateway page when two log-in links are available (e.g. for CAS), the following applies only when you are logged in: */
.is-maximized #loginLinks
{
	border-left: $top-header-separators-thickness solid var(--topNav-border-color);
}

.#{$namespace}sitesNav__menu{
	list-style: none;
	padding: 0 0 0 0;
	margin-bottom:0px;
}

.portal-bullhorns-buttons{
	position: relative;
	display: inline-block;
	margin-left: $top-header-item-spacing;
	padding-left: $top-header-item-spacing;
	border-left: $top-header-separators-thickness solid var(--topNav-border-color);
    white-space: nowrap;
    a {
        text-decoration: none;
    }
}

##{$namespace}bullhorn {
	display: inline-block; /* Sakai 11.1 makes it flex, which is wrong */
	width: $top-header-icon-size;
	height: $top-header-icon-size;
	.icon-sakai--academic-bullhorn {
		padding:0;
	}
	&:hover {
		text-decoration: none;
		color: var(--topNav-text-color);
		background: rgba(0,0,0,.2);
		border-radius:50%;
	}
	&:active {
		background: rgba(0,0,0,.4);
	}
}


.view-all-sites-btn{
	position: relative;
	display: inline-block;
	margin-left: $top-header-item-spacing;
	padding-left: $top-header-item-spacing;
	border-left: $top-header-separators-thickness solid var(--topNav-border-color);

	@media #{$phone}{
		display: none;
	}
}

.view-all-sites-btn a{
	text-decoration: none;
	&:hover, &:active
	{
		text-decoration: none;
		color: var(--topNav-text-color);

		i
		{
			background: rgba(0,0,0,.2);
			border-radius:50%;
		}

		span.all-sites-label
		{
			text-decoration: underline; /* just underline the text */
		}
	}
	&:active i {
		background: rgba(0,0,0,.4);
	}
}

.all-sites-label {
	display: $top-header-text-display;
	margin-left: $standard-space;
}
#topnav_container
{
	@include display-flex;
	@include align-items(center);
	background-color: var(--sites-nav-background);
	min-height: $banner-height;
	padding: 0 $standard-spacing;		// space on the sides; top and bottom spacing will be determined by children
	transition:var(--sak-theme-switch-ease);
}

#linkNav{
	ul{
		@include display-flex;
		@include flex-wrap( wrap );
		font-family: $header-font-family;
		margin: $standard-spacing 0 0 0;
		padding: 0;

		li.#{$namespace}sitesNav__menuitem{
			@include display-flex;
			@include align-items(center);
			position: relative;
			margin: 0 $standard-spacing $standard-spacing 0;	// space the items apart, and space vertically if wrapped
			padding: 0;
			border-radius: $sites-nav-menu-item-border-radius;
			background: var(--sites-nav-menu-item-background);

			&:hover {
				box-shadow: var(--elevation-2dp);
				transition: $active-transition-hover;
				background: var(--sites-nav-menu-item-hover-background);
				border-color: var(--sites-nav-menu-item-hover-border-color);
				a {
					background: var(--sites-nav-menu-item-hover-background);
					border-color: var(--sites-nav-menu-item-hover-border-color);
				}
			}
			&:active {
				box-shadow: var(--elevation-1dp);
				transition: $active-transition-active;
				background: var(--sites-nav-menu-item-active-background);
				border-color: var(--sites-nav-menu-item-active-border-color);
				a {
					background: var(--sites-nav-menu-item-active-background);
					border-color: var(--sites-nav-menu-item-active-border-color);
				}
			}

			.link-container{
				@include display-flex;
				@include align-items( center );
				@include sitesNavStyling();
			}

			&.dropdown-is-visible {
				background: var(--sites-nav-menu-item-background);
				border-radius: $sites-nav-menu-item-border-radius $sites-nav-menu-item-border-radius 0 0;
				box-shadow: 0 5px 5px -3px rgba(0,0,0,.6);
				&:after {
					content: "";
					border-bottom: var(--sites-nav-selected-submenu-border);
					width: 100%; // fallback for browsers who don't calculate nested equations
					width: calc(100% - (2 * #{$sites-nav-menu-item-border-thickness}));	// width minus the left and right border widths
					position: absolute;
					bottom: 0;
					left: $sites-nav-menu-item-border-thickness;					// left border width
					z-index: 100;
				}
				
				.link-container, .#{$namespace}sitesNav__dropdown, .#{$namespace}sitesNav__favbtn {
					border-top: $sites-nav-menu-item-border-top;
					border-right: $sites-nav-menu-item-border-right;
					border-bottom: $sites-nav-menu-item-border-bottom;
					border-left: $sites-nav-menu-item-border-left;
					border-color: var(--sites-nav-menu-item-border-color);
					background: var(--sites-nav-menu-item-background);
				}
			}

			span {
				line-height: 1;
			}
			
			.#{$namespace}sitesNav__dropdown, .#{$namespace}sitesNav__favbtn {
				@include sitesNavStyling();
				box-sizing: content-box;			// to allow width and height control the size to match the site title link text
				width: $default-font-size; 			// to match the height
				height: $default-font-size;			// to match the link text size

				&:hover,
				&:focus {
					background: var(--sites-nav-menu-item-hover-icon-background);
					border-color: var(--sites-nav-menu-item-hover-icon-border-color);
				}
			}
			
			.#{$namespace}sitesNav__dropdown{
				@extend .fa-angle-down;
				@extend .fa;
				@extend .fa-lg;
				margin-left: -#{$sites-nav-menu-item-border-thickness}; 					// to overlap the left border with the site title's border, so border thickness will remain 1px and hover will still work				
				
				&.is-clicked{
					@include transform( rotate(180deg) );
					top: 40%;
					border-right: $sites-nav-menu-item-hover-border-left;	// using the left variable because of the item rotation (right is left)
					border-bottom: $sites-nav-menu-item-hover-border-top;	// using top variable because of the item rotation (bottom is top)
					border-left: $sites-nav-menu-item-hover-border-right;	// using the right variable because of the item rotation (left is right)
					border-color: var(--sites-nav-menu-item-border-color);
					background: var(--sites-nav-menu-item-background);
				}
			}
			
			.#{$namespace}sitesNav__favbtn {
				@extend .fa-star;
				@extend .fa;
				margin-right: -#{$sites-nav-menu-item-border-thickness}; 					// to overlap the right border with the site title's border, so border thickness will remain 1px and hover will still work				

				&.non-fav {
					@extend .fa-star-o;
					@extend .fa;
				}
			}
			
			.#{$namespace}sitesNav__submenu {
				position: absolute;
				padding: $standard-spacing 0;
				top: $sites-nav-submenu-top;
				left: 0;
				z-index: 99;
				display: none;
				min-width: calc(100% + (#{$standard-spacing} * 2));	// prevent rounded corner visual bugs by forcing submenu to be larger than site title
				width: max-content; // if the content is wider than the site title, expand to the longest tool name
				border: $sites-nav-submenu-border;
				border-color: var(--sites-nav-submenu-border-color);
				background: var(--sites-nav-menu-item-background);
				box-shadow: 0 5px 5px -3px rgba(0,0,0,.6);
				border-radius: 0 $sites-nav-menu-item-border-radius $sites-nav-menu-item-border-radius $sites-nav-menu-item-border-radius;
				.#{$namespace}sitesNav__submenuitem {
					display: block;
					// border: 0px none;
					@include border-radius( 0 );
					margin: 0 0 0 0;
					padding: 0 0 0 0;
					min-height: 15px;

					.#{$namespace}sitesNav__submenuitem-link, a {
						@include display-flex;
						@include align-items(center);
						padding: $sites-nav-submenu-item-padding;
						text-decoration: none;
						color: var(--sites-nav-submenu-item-color);
						font-size: $sites-nav-submenu-item-text-size;
						line-height: 1em;
						background: var(--sites-nav-submenu-background);
						
						&:hover, &:active {
							color: var(--sites-nav-submenu-item-color); // to override default link hover color
							background: var(--sites-nav-submenu-item-hover-background);
						}
						&:active {
							background: var(--sites-nav-submenu-item-active-background);
						}
						&:focus {
							outline-offset: -#{$focus-outline-width};	// to match the width of the default link focus to fit in the tool's link container
						}
						.toolMenuIcon{
							@extend .fa-fw;
							vertical-align: sub;
							margin: 0;
						}
					}
					.#{$namespace}sitesNav__submenuitem-icon {
						display: inline-block;
						vertical-align: middle;
						padding: 0 $standard-spacing 0 0;
					}
					.#{$namespace}sitesNav__submenuitem-title {
						display: inline-block;
					}
					&.#{$namespace}sitesNav__submenuitem__gotosite {
						border-top: 1px solid var(--sites-nav-submenu-item-divider-color);
						a {
							padding-left:0;
						}
						> a:after {
							font-family: FontAwesome;	
							content: '\f178';	
							margin-left: 10px;	
							color: var(--sites-nav-submenu-item-icon-color);	
						}	
	
						&:hover {	
							border-top: 1px solid var(--sites-nav-submenu-item-divider-color);	
	
							> a:after {	
								color: var(--sites-nav-submenu-item-hover-icon-color);	
							}	
						}
					}
				}
				&.is-visible{
					display: block;
				}
				&.is-hidden{
					display: none;
				}
			}
			
			// Current site is selected:
			&.is-selected {
				background: var(--sites-nav-menu-item-selected-background);

				&:hover {
					background: var(--sites-nav-menu-item-selected-hover-background);
					border-color: var(--sites-nav-menu-item-selected-hover-border-color);
					a {
						background: var(--sites-nav-menu-item-selected-hover-background);
						border-color: var(--sites-nav-menu-item-selected-hover-border-color);
					}
				}

				&:active {
					background: var(--sites-nav-menu-item-selected-active-background);
					border-color: var(--sites-nav-menu-item-selected-active-border-color);
					a {
						background: var(--sites-nav-menu-item-selected-active-background);
						border-color: var(--sites-nav-menu-item-selected-active-border-color);
					}
				}

				.link-container, .#{$namespace}sitesNav__dropdown, .#{$namespace}sitesNav__favbtn {
					background: var(--sites-nav-menu-item-selected-background);
					border-top: $sites-nav-menu-item-selected-border-top;
					border-right: $sites-nav-menu-item-selected-border-right;
					border-bottom: $sites-nav-menu-item-selected-border-bottom;
					border-left: $sites-nav-menu-item-selected-border-left;
					border-color: var(--sites-nav-menu-item-selected-border-color);
					color: var(--sites-nav-menu-item-selected-color);
					font-weight: $sites-nav-menu-item-selected-font-weight;

					&:hover, &:focus {
						border-top: $sites-nav-menu-item-selected-hover-border-top;
						border-right: $sites-nav-menu-item-selected-hover-border-right;
						border-bottom: $sites-nav-menu-item-selected-hover-border-bottom;
						border-left: $sites-nav-menu-item-selected-hover-border-left;
						border-color: var(--sites-nav-menu-item-selected-hover-border-color);
						background: var(--sites-nav-menu-item-selected-hover-background);
					}
					&:active {
						background: var(--sites-nav-menu-item-selected-active-background);
						border-color: var(--sites-nav-menu-item-selected-active-border-color);
						
					}
				}
				.#{$namespace}sitesNav__dropdown, .#{$namespace}sitesNav__favbtn {
					&:hover,
					&:focus {
						background: var(--sites-nav-menu-item-selected-hover-icon-background);
						border-color: var(--sites-nav-menu-item-selected-hover-icon-border-color);
					}
					&:active {
						background: var(--sites-nav-menu-item-selected-active-icon-background);
						border-color: var(--sites-nav-menu-item-selected-active-icon-border-color);
					}
				}
				&.dropdown-is-visible {
					background:var(--sites-nav-menu-item-selected-background);

					&:after {	// the rest of the properties will inherit from the default case above
						content: "";
						border-bottom: var(--sites-nav-selected-submenu-border);
					}
					
					.link-container, .#{$namespace}sitesNav__dropdown, .#{$namespace}sitesNav__favbtn {
						border-top: $sites-nav-menu-item-selected-hover-border-top;
						border-right: $sites-nav-menu-item-selected-hover-border-right;
						border-bottom: $sites-nav-menu-item-selected-hover-border-bottom;
						border-left: $sites-nav-menu-item-selected-hover-border-left;
						border-color: var(--sites-nav-menu-item-selected-border-color);
						background: var(--sites-nav-menu-item-selected-background);
					}
				}

				.#{$namespace}sitesNav__submenu {
					border: $sites-nav-submenu-border;
					border-color: var(--sites-nav-submenu-selected-border-color);
					background: var(--sites-nav-submenu-selected-background);
					.#{$namespace}sitesNav__submenuitem {
						.#{$namespace}sitesNav__submenuitem-link, a {
							position: relative;
							background: var(--sites-nav-menu-item-selected-background);
							color: var(--sites-nav-menu-item-selected-color);
							.toolMenuIcon {
								color: var(--sites-nav-menu-item-selected-color);
							}
							&:hover, &:active, &:focus {
								background: var(--sites-nav-submenu-item-selected-hover-background);
								color: var(--sites-nav-submenu-item-selected-hover-color);
								
								.toolMenuIcon {
									color: var(--sites-nav-submenu-item-selected-hover-icon-color);
								}
							}
							&:active {
								background: var(--sites-nav-submenu-item-selected-active-background);
							}
							
						}
						&.#{$namespace}sitesNav__submenuitem__gotosite {
							border-top: 1px solid var(--sites-nav-submenu-item-selected-divider-color);
							> a:after {
								font-family: FontAwesome;
								content: '\f178';
								margin-left: 10px;
								color: var(--sites-nav-submenu-item-icon-color);
							}	
	
							&:hover {	
								border-top: 1px solid var(--sites-nav-submenu-item-selected-divider-color);

								> a:after {
									color: var(--sites-nav-submenu-item-hover-icon-color);
								}
							}
						}
					}
				}
			}

			&.#{$namespace}sitesNav__menuitem--myworkspace .fa-home {
				margin-right: $standard-space-4x;
			}
			
			.#{$namespace}sitesNav__gateway {
				@extend .fa-university;
				@extend .fa;
				margin-right: $standard-space;
			}
		}
	}
	&.opened{
		@media #{$desktop}{
			max-height: 100%;
			overflow: visible;
			#how-many-hidden{
				display: none;
			}
		}
	}
	@media #{$phone}{
		display: inline;
	}
}

.sitenav-dropdown-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 20;
}

body.is-logged-out #linkNav .#{$namespace}sitesNav__menuitem .#{$namespace}sitesNav__dropdown {
	display: none;
}

#show-all-sites{
	display: none;
}

#show-all-sites-mobile{
	color: var(--sakai-background-color-2);
	background: var(--sakai-background-color-2);
	display: none;
	cursor: pointer;
	position: absolute;
	text-align: center;
	font-size: 1.5em;
	top: 0em;
	right: 0em;
	width:2.5em;
	border-left: 1px solid var(--sakai-border-color);
	padding: 0 9px;
	outline: 0;
	> div{
		display: inline-block;
	}
	#how-many-hidden-mobile{
		font-size: 0.8em;
		vertical-align: middle;
		margin: 0 4px 2px 2px;
		display: inline-block;
	}
	&.opened{
		right: 10px;
		border-left: 0px none;
		> div {
			color: var(--sakai-secondary-color-1);
			@include transform( rotateZ(45deg) );
		}
	}
}
.#{$namespace}sitesNav__doubledrop{
	@extend .fa-angle-double-down;
	@extend .fa;
	@extend .fa-lg;
	padding-left:5px;
}

.#{$namespace}siteStatus{
	@include display-flex;
	@include align-items(center);
	@include justify-content(center);
	margin: $standard-spacing $standard-spacing 0 $standard-spacing;
	padding: $standard-spacing;

	&.is-softly-deleted{
		color: var(--siteDelete-color);
		background-color: var(--siteDelete-background);
		border: $siteDelete-border;
		border-color: var(--siteDelete-border-color);

		p {
			margin: 0;
			padding: 0;
		}
	}

	&.is-unpublished{
		color: var(--siteUnpublish-color);
		background-color: var(--siteUnpublish-background);
		border: $siteUnpublish-border;
		border-color: var(--siteUnpublish-border-color);
		text-align: center;
		display: block;

		h4{
			display: inline-block;
			margin: 0;
			padding: 0;
		}
		button{
			@extend .button;
			margin: 0 0 0 $standard-spacing;
		}
	}

	button{
		@extend .button;
		margin: 0 0 0 $standard-spacing;
	}
}

.title-size {
	font-size: $default-font-size + 2px;
}

.user-dropdown-overlay{
	height: 100%;
	position: fixed;
	width: 100%;
	z-index: 20;
}

#profileImageUpload {

    .modal-header {
        padding: 5px 15px;
    }

    .modal-dialog {
        width: 332px !important;
    }

    #file {
        position: relative;
        margin-bottom: 5px;

        input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
    }
    #cropme {
        height: 300px;
        width: 300px;
        margin-bottom: 15px;

       .cropper-view-box {
            border-radius: 50% !important;
        }
    }

    #cropToolbar {

        .profile-image-zoom-in {
            &:before {
                font-family: 'FontAwesome';
                content: '\f00e';
            }
        }
        .profile-image-zoom-out {
            &:before {
                font-family: 'FontAwesome';
                content: '\f010';
            }
        }
        .profile-image-pan-left {
            &:before {
                font-family: 'FontAwesome';
                content: '\f060';
            }
        }
        .profile-image-pan-right {
            &:before {
                font-family: 'FontAwesome';
                content: '\f061';
            }
        }
        .profile-image-pan-up {
            &:before {
                font-family: 'FontAwesome';
                content: '\f062';
            }
        }
        .profile-image-pan-down {
            &:before {
                font-family: 'FontAwesome';
                content: '\f063';
            }
        }
        .profile-image-rotate {
            &:before {
                font-family: 'FontAwesome';
                content: '\f01e';
            }
        }
    }
}

.#{$namespace}siteHierarchy .manage-overview-link {
	@include sakai_secondary_button();
	position: absolute;
	right: $standard-spacing;
	margin-top: -4px;
	
	> span {
		margin-right: $standard-space;
	}
	
	@media #{$phone} {
		visibility: hidden;
	}
}

// styles for the role switcher
.role-switcher {
	margin-inline-start: auto;
}

#roleSwitchSelect {
	font-weight: bold;
}
